<template>
  <div class="zui-switch-field" :class="{ 'label-position-top': labelPosition == 'top' }">
    <zui-field
      class="field"
      :padding="fieldPadding"
      :label-position="labelPosition"
      :label-style="labelStyle"
      :round="round"
      :show-shadow="showShadow"
      :label="label"
      :clickable="false"
    >
      <template #accessory>
        <zui-switch v-model="value" :yes-Text="yesText" :no-text="noText" />
      </template>
    </zui-field>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: Boolean,
  round: Boolean,
  showShadow: Boolean,
  labelPosition: String,
  // weak/normal/strong
  labelStyle: String,
  label: String,
  yesText: String,
  noText: String
})

const value = ref(props.modelValue)
watch(
  () => props.modelValue,
  (val) => {
    value.value = val
  }
)
watch(value, (inputValue) => {
  emit('update:modelValue', inputValue)
})

const fieldPadding = props.labelPosition == 'top' ? '16px 20px 12px 20px' : '4px 20px'
</script>
<style lang="scss" scoped></style>
